<!DOCTYPE html>
<html>
<head>
    <title>Reminder App</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Import Element Plus CSS -->
    <link rel="stylesheet" href="node_modules/element-plus/dist/index.css">
</head>
<body>
    <div id="app" class="container">
        <el-container>
            <el-main>
                <h1>Reminder App</h1>
                <div class="current-time">
                    <span>{{ currentTime }}</span>
                </div>
                
                <el-card class="reminder-form">
                    <el-form :model="newReminder" label-position="top">
                        <el-form-item label="Title">
                            <el-input v-model="newReminder.title" placeholder="Reminder Title"></el-input>
                        </el-form-item>
                        <el-form-item label="Description">
                            <el-input type="textarea" v-model="newReminder.description" placeholder="Description"></el-input>
                        </el-form-item>
                        <el-form-item label="Date & Time">
                            <el-date-picker
                                v-model="newReminder.dateTime"
                                type="datetime"
                                placeholder="Select date and time"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                        <el-button type="primary" @click="createReminder" style="width: 100%">Create Reminder</el-button>
                    </el-form>
                </el-card>

                <el-card class="reminder-list">
                    <template v-if="sortedReminders.length === 0">
                        <el-empty description="No reminders yet"></el-empty>
                    </template>
                    <el-timeline v-else>
                        <el-timeline-item
                            v-for="reminder in sortedReminders"
                            :key="reminder.id"
                            :timestamp="formatDateTime(reminder.dateTime)"
                            :type="isPastReminder(reminder) ? 'info' : 'primary'">
                            <el-card :class="{ 'past-reminder': isPastReminder(reminder) }">
                                <div class="reminder-header">
                                    <h4>{{ reminder.title }}</h4>
                                    <el-button
                                        type="danger"
                                        size="small"
                                        circle
                                        @click="confirmDelete(reminder)"
                                        icon="Delete">
                                    </el-button>
                                </div>
                                <p v-if="reminder.description" class="reminder-description">
                                    {{ reminder.description }}
                                </p>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-card>
            </el-main>
        </el-container>
    </div>
    <script src="renderer.js"></script>
</body>
</html> 